<template>
	<div class="evidence-unit-camera-container">
		<!--开启摄像头的弹窗-->
		<el-dialog title="拍照" class="el-dialog" v-model="isShowDialog" align="center" fullscreen="true">
			<div class="box">
				<video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" controls></video>
				<canvas id="canvasCamera" ref="canvasRef" class="canvas" :width="videoWidth" style="display: none" :height="videoHeight"></canvas>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" size="small"> 关闭 </el-button>
					<el-button @click="drawImage" icon="el-icon-camera" type="primary" size="small"> 拍 照 </el-button>
					<el-button @click="resetCanvas" icon="el-icon-refresh" type="primary" size="small"> 重 拍 </el-button>
					<el-button @click="onCancel" icon="el-icon-circle-close" type="primary" size="small"> 完 成 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, nextTick, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
	name: 'casePrint',
	setup() {
		var canvasRef = ref();

		const state = reactive({
			isShowDialog: false,
			videoWidth: 1000, // 绘画布的宽高
			videoHeight: 800,
			canvas: null,
			video: null,
			context: null,
		});
		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
			nextTick(() => {
				state.canvas = document.getElementById('canvasCamera');
				state.video = document.getElementById('videoCamera');
				state.context = state.canvas.getContext('2d');
				if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
					//调用用户媒体设备, 访问摄像头
					getUserMedia(
						{
							video: {
								width: 1000,
								height: 800,
							},
						},
						success,
						error
					);
				} else {
					alert('不支持访问用户媒体');
				}
			});
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};

		const success = (stream: any) => {
			//兼容webkit核心浏览器
			let CompatibleURL = window.URL || window.webkitURL;
			//将视频流设置为video元素的源
			console.log(stream);
			state.video.src = CompatibleURL.createObjectURL(stream);
			//state.video.srcObject = stream;
			state.video.play();
		};
		const error = (error) => {
			console.log('访问用户媒体设备失败${error.name}, ${error.message}');
		};

		//访问用户媒体设备的兼容方法
		const getUserMedia = (constraints, success, error) => {
			if (navigator.mediaDevices.getUserMedia) {
				//最新的标准API
				navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
			} else if (navigator.webkitGetUserMedia) {
				//webkit核心浏览器
				navigator.webkitGetUserMedia(constraints, success, error);
			} else if (navigator.mozGetUserMedia) {
				//firfox浏览器
				navigator.mozGetUserMedia(constraints, success, error);
			} else if (navigator.getUserMedia) {
				//旧版API
				navigator.getUserMedia(constraints, success, error);
			}
		};

		const ckPZ = () => {
			state.context.drawImage(video, 0, 0, 480, 320);
			var bs64 = state.canvas.toDataURL();
		};

		onMounted(() => {});

		return {
			success,
			error,
			ckPZ,
			openDialog,
			closeDialog,
			getUserMedia,
			...toRefs(state),
		};
	},
};
</script>

<style scoped></style>
